<template>
  <div>
    <el-form
      :model="appUserForm"
      :rules="rules"
      ref="appUserForm"
      label-width="100px"
      class="demo-appUserForm"
    >
      <el-form-item label="登录名" prop="name">
        <el-input v-model="appUserForm.Name" disabled></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="NickName">
        <el-input v-model="appUserForm.NickName"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="Sex">
        <el-select v-model="appUserForm.Sex" placeholder="请选择性别">
          <el-option
            label="男"
            value="男"
            :selected="appUserForm.Sex === '男'"
          ></el-option>
          <el-option
            label="女"
            value="女"
            :selected="appUserForm.Sex === '女'"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头像" prop="TitlePic">
        <el-col :span="12">
          <img
            :src="baseImgURL + appUserForm.TitlePic"
            v-show="oldImgShow"
            style="width: 100%"
          />
          <upload
            @returnUrl="handleReturnUrl"
            actionURL="NewsTitlePic"
          ></upload>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('appUserForm')"
          >点击修改</el-button
        >
        <el-button @click="resetForm('appUserForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>



<script>
import upload from "../../Upload/Upload.vue";
import User from "@/api/User.js";
const user = new User();
export default {
  data() {
    return {
      appUserForm: {
        Name: "", //不可以更改userName
        Sex: "",
        NickName: "",
        TitlePic: "",
        Address: "",
      },
      rules: {
        Sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        NickName: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "change",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          }
        ],
        TitlePic: [
          {
            required: true,
            message: "请选择用户头像",
            trigger: "change",
          },
          {
            min: 1,
            max: 200,
            message: "长度在 1 到 200 个字符",
            trigger: "blur",
          }
        ],
        Address: [
          {
            required: true,
            message: "请输入地址",
            trigger: "change",
          },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur",
          }
        ],
      },
      baseImgURL: "http://121.196.246.105:4000/User/Images/",
      oldImgShow: true,
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
            // console.log(this.appUserForm);
          const response = await user.ChangeUserInfo(this.appUserForm,this.$store.state.token)
        //   console.log(response);
          if(response.data.code===200){
            //   操作成功
            this.$message.success("操作成功");
            window.location.reload();
          }
          else{
            this.$message.error("服务器错误，操作失败！");
          }
        } else {
          this.$message.error("非法的输入！");
          await this.resetForm();
          return false;
        }
      });
    },
    async resetForm(formName) {
      //   this.$refs[formName].resetFields();
      const appUser = (await this.GetCurrentUser()).data;
      //   将从后台api拿到的数据赋值给appUserForm
      this.appUserForm.Name = appUser.name;
      this.appUserForm.Sex = appUser.sex;
      this.appUserForm.NickName = appUser.nickName;
      this.appUserForm.TitlePic = appUser.titlePic;
      this.appUserForm.Address = appUser.address;
    },

    // 上传成功后：由子组件传值返回图片名称
    handleReturnUrl(imageName) {
      // 更新img路径
      this.appUserForm.TitlePic = imageName;
      // 将原来显示Img隐藏
      this.oldImgShow = false;
    },

    //·················得到当前用户··················
    async GetCurrentUser() {
      const appUserId = this.$store.state.id;
      const token = this.$store.state.token;
      const response = await user.GetUserById(appUserId, token);
      return response.data;
    },
  },
  components: {
    upload,
  },
  async mounted() {
    const appUser = (await this.GetCurrentUser()).data;
    //   将从后台api拿到的数据赋值给appUserForm
    this.appUserForm.Name = appUser.name;
    this.appUserForm.Sex = appUser.sex;
    this.appUserForm.NickName = appUser.nickName;
    this.appUserForm.TitlePic = appUser.titlePic;
    this.appUserForm.Address = appUser.address;
  },
};
</script> 